<template>
    <div class="manage">
        <div class="manage-sidebar">
            <el-menu
                    router
                    :default-active="activeIndex"
                    background-color="#515a6e"
                    text-color="#dddddd"
                    active-text-color="#ffffff">
                <template v-for="menu in menuList">
                    <el-menu-item v-if="menu.children.length === 0" :index="menu.routing" :key="menu.ukId">
                        <i :class="menu.icon"></i>
                        {{menu.name}}
                    </el-menu-item>
                    <el-submenu v-if="menu.children.length !== 0" :index="menu.routing" :key="menu.ukId">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            {{menu.name}}
                        </template>
                        <el-menu-item v-for="child in menu.children" :index="child.routing" :key="child.ukId">
                            <i :class="child.icon"></i>
                            {{child.name}}
                        </el-menu-item>
                    </el-submenu>
                </template>
            </el-menu>
        </div>
        <div class="manage-detailed">
            <router-view></router-view>
            <el-backtop target=".el-table__body-wrapper" :visibility-height="10">
                <i style="color: #2d8cf0" class="el-icon-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>
  import MenuUtil from "../../utils/MenuUtil";
  import {mapDict} from "../../api/manage/dict";
  import DictUtils from "../../utils/DictUtils";
  import {listUserMenuTreeBySystem} from "../../api/manage/menu";

  export default {
    name: "Manage",
    components: {},
    data () {
      return {
        activeIndex: "",
        menuList: []
      }
    },
    methods: {
      mapDict () {
        mapDict().then(result => {
          DictUtils.setDict(this, "manage", result.data.dictMap)
        })
      },
      listUserMenuTreeBySystem (activeSystem) {
        listUserMenuTreeBySystem(activeSystem).then(result => {
          this.menuList = result.data.menuTree
          this.activeIndex = MenuUtil.activeMenu(this.$route.path, 2)
        })
      }
    },
    created () {
      this.listUserMenuTreeBySystem(this.$store.state.Pabu.activeSystem)
      this.mapDict()
    },
    computed: {
      activeSystem () {
        return this.$store.state.Pabu.activeSystem
      }
    },
    watch: {
      activeSystem (newVal, oldVal) {
        this.listUserMenuTreeBySystem(newVal)
      }
    },
  }
</script>

<style>
    .manage {
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
        float: left;
    }

    .manage-sidebar {
        width: 200px;
        height: 100%;
        background-color: #515a6e;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .manage-detailed {
        padding: 5px;
        width: calc(100% - 210px);
        height: calc(100% - 10px);
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* iview样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .manage-sidebar > .el-menu {
        border: none;
    }

    .manage-sidebar > .el-menu > li[class*="el-submenu is-active is-opened"] > div {
        background: #546580 !important;
    }

    .manage-sidebar > .el-menu > li[class*="el-menu-item is-active"],
    .manage-sidebar > .el-menu > li > ul > li[class*="el-menu-item is-active"] {
        border-left: #5cadff 5px solid;
        border-right: none;
        color: #fff;
        background: #6f83a2 !important;
    }

    .manage-sidebar > .el-menu > .el-menu-item {
        height: 50px;
        line-height: 50px;
    }

    /*子模版样式*/
    .manage-menu {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .manage-menu > .el-table {
        height: calc(100% - 35px) !important;
    }

    .manage-menu > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }

</style>
